<template>
<div>
  <a-modal
    :title=title
    :visible="openDialog"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="confirmBtn('updateForm')"
    @cancel="()=>this.$emit('update:openDialog', false)"
  >
    <a-form-model ref="updateForm" :model="formData" :rules="rules" v-bind="layout">
      <a-form-model-item label="新名称" prop="name">
        <a-input ref="input" v-model="formData.name" @pressEnter="confirmBtn('updateForm')" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
  </div>
</template>

<script>
import api from '@/server/mouldConfig.js';

export default {
  name: 'updateNameDialog',
  props: {
    openDialog: Boolean,
    title: String,
    data: Object
  },
  data() {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: {
          required: true,
          min: 1,
          max: 70,
          message: '请输入1-70位之间的字符',
          trigger: 'blur',
        }
      },
      layout: {
        layout: 'horizontal',
        labelAlign: 'right',
        hideRequiredMark: true,
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
    };
  },
  methods: {
    confirmBtn(formName) {
      let _this = this;
      _this.$refs[formName].validate(async (valid) => {
          if(!valid) return 
        let { name } = _this.formData;

        const res = await api.formUpdate({
          id: this.data.id,
          name: name
        });
        if (res.code != 200) {
          this.$message.error('修改失败');
          return;
        }
        _this.$emit('confirmRefreshData',name);
        _this.$refs[formName].resetFields();
        _this.$emit('update:openDialog', false);
      });
    },
  },
  mounted(){
    this.formData.name = this.data.name
    this.$nextTick( ()=> {
      this.$refs.input.select()
    } )
  }
};
</script>

<style scoped></style>